.indicator {
  @apply relative inline-flex;
  width: max-content;

  :where(.indicator-item) {
    z-index: 1;
    @apply absolute whitespace-nowrap;
    top: var(--indicator-t, 0);
    bottom: var(--indicator-b, auto);
    inset-inline-start: var(--indicator-s, auto);
    inset-inline-end: var(--indicator-e, 0);
    translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
    [dir="rtl"] & {
      --indicator-x: -50%;
    }
  }
}

.indicator-start {
  --indicator-s: 0;
  --indicator-e: auto;
  --indicator-x: -50%;
  [dir="rtl"] & {
    --indicator-x: 50%;
  }
}

.indicator-center {
  --indicator-s: 50%;
  --indicator-e: 50%;
  --indicator-x: -50%;
  [dir="rtl"] & {
    --indicator-x: 50%;
  }
}

.indicator-end {
  --indicator-s: auto;
  --indicator-e: 0;
  --indicator-x: 50%;
  [dir="rtl"] & {
    --indicator-x: -50%;
  }
}

.indicator-bottom {
  --indicator-t: auto;
  --indicator-b: 0;
  --indicator-y: 50%;
}

.indicator-middle {
  --indicator-t: 50%;
  --indicator-b: 50%;
  --indicator-y: -50%;
}

.indicator-top {
  --indicator-t: 0;
  --indicator-b: auto;
  --indicator-y: -50%;
}
